<script setup>
import {ref, onBeforeMount, watch, inject, onMounted, reactive} from 'vue'
import { marked } from 'marked'
import hljs from "highlight.js"; // 引入 highlight.js
import '@/css/hljs.css'
import Directory from "@/components/Directory.vue";

const nav = [
  {
    id: 10,
    name: "快速入门",
    filename: "quickStart"
  },
  {
    id: 20,
    name: "版本",
    filename: "version"
  },
];

// 是否开启黑暗模式
let isBlackMode = inject('isBlackMode');
// 是否竖屏
let isVerticalScreen = inject("isVerticalScreen");

const tags = ref([]);


var mdHtml = ref("");

const render = new marked.Renderer();
marked.setOptions({
  renderer: render, // 这是必填项
  gfm: true,	// 启动类似于Github样式的Markdown语法
  pedantic: false, // 只解析符合Markdwon定义的，不修正Markdown的错误
  sanitize: true, // 原始输出，忽略HTML标签（关闭后，可直接渲染HTML标签）

  // 高亮的语法规范
  highlight: (code, lang) => hljs.highlight(code, { language: lang }).value,
});

var handleNodeClick = async (data) => {
  if(data.filename === '') {
    return;
  }
  const res = await fetch('./md/' + data.filename + '.md');
  mdHtml.value = marked(await res.text());
  document.getElementById('hh').innerHTML = mdHtml.value;
  hljs.highlightAll();
  tags.value = [];
  let i = 1;
  while(true) {
    const doc = document.getElementById(data.filename+'.'+i);
    if (doc === undefined || doc === null) break;
    tags.value.push({
      id: data.filename+'.'+i,
      name: doc.innerText
    });
    i++;
  }
}

onBeforeMount(()=>{
  handleNodeClick(nav[0]);
});

onMounted(()=>{
  if(isBlackMode.value) {
    document.getElementById('hh').style.color = 'white';
  } else {
    document.getElementById('hh').style.color = '#141414';
  }
  watch(() => isBlackMode.value, (newValue) => {
    if(isBlackMode.value) {
      document.getElementById('hh').style.color = 'white';
    } else {
      document.getElementById('hh').style.color = '#141414';
    }
  });
});

</script>
<template>
  <div class="contents" :style="{'color': isBlackMode?'white':'black'}">
    <el-menu
      default-active="10"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
    >
      <el-menu-item v-for="item in nav" :index="String(item.id)">
        {{item.name}}
      </el-menu-item>
    </el-menu>
<!--    <directory :list="nav" :handleClick="handleNodeClick" style="color: inherit; height: calc(100vh - 60px);"></directory>-->
<!--    <div id="hh" class="mdHtml markdown-body"></div>-->
<!--    <div v-show="!isVerticalScreen" style="width: 150px; height: 100px; color: inherit;">-->
<!--      <div class="tag" v-for="index in tags">-->
<!--        <a :href="'#'+index.id">{{index.name}}</a>-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>
<style scoped>
.contents{
  margin-top: 80px;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
}

.con-ul{
  width: 20%;
  /* min-height: 100vh; */
  list-style: none;
  text-align: left;
  display: flex;
  flex-direction: column;
  user-select:none;
  line-height: 2 !important;
  /* justify-content: center; */
}

.el-tree{
  --el-tree-node-content-height: '' !important;
}

.con-uls{
  line-height: 2;
  font-size: 20px;
  user-select:none;user-select:none;
  text-overflow: ellipsis; /* 溢出用省略号 */
  white-space: nowrap; /* 溢出不换行 */
  -webkit-line-clamp: 1; /* 控制显示的行数 */
}
.con-lis{
  font-size: 16px;
  text-indent: 2em;
  user-select:none;
  text-overflow: ellipsis; /* 溢出用省略号 */
  white-space: nowrap; /* 溢出不换行 */
  -webkit-line-clamp: 1; /* 控制显示的行数 */
}
.con-liss{
  font-size: 14px;
  text-indent: 4em;
  user-select:none;
  text-overflow: ellipsis; /* 溢出用省略号 */
  white-space: nowrap; /* 溢出不换行 */
  -webkit-line-clamp: 1; /* 控制显示的行数 */
}
.mdHtml{
  width: 80vw;
  margin: 10px 20px;
  flex: 1;
  text-align: left !important;
}

.tag {
  width: 120px;
  height: 35px;
  text-align: left;
  color: inherit;
  transition: all 0.1s ease-in-out;
  border-radius: 10px;
  user-select: none;
}
.tag:hover {
  background-color: rgb(230,232,234);
}
.tag a {
  color: inherit;
  width: 96px;
  height: 100%;
  line-height: 35px;
  padding: 0 12px;
}
</style>
